Aston Shell skinning tutorial

A complete guide to making Aston Themes

Version from June, 2, 2006

This document is copyrighted © 2002-2006 by Taras "SacRat" Brizitsky, Gladiators Software.
Partial copyright 2002-2006 by Nerio, Nikita "Smanic" Eugenov, Roman Osadchy, Nick Egorov, Dmitry "Hard Crayon" Prosvirnin, Rich "mrbiotech" Kulesus, Ksenia "Kess" Luckacher and others.
All used graphics belong to their respective owners (mentioned in the text).

Distributed under the terms of FDL and CC Attribution-NonCommercial-ShareAlike 2.5.
  • Chapter I: Introduction
    • About this document
    • Graphics tutorials
    • Artists to learn from
    • Basic Theme
    • A few definitions
  • Chapter II: Resource types
    • BMP, PNG, ICO, JPG
    • 3PIC
    • ANI animation, ANK objects
    • A few words about ANKz
    • Dealing with frame lists
  • Chapter III: Wallpapers and screen resolution
    • Wallpapers
    • Making multiresolution Themes
  • Chapter IV: Main Menu and Start button
    • Skinning Start button
    • Main menu
  • Chapter V: Taskbar and Tray area
    • Taskbar skins, Tray
    • Some hints
  • Chapter VI: Toolbars
  • Chapter VII: Desktop elements
  • Chapter VIII: Transparency
    • Using Transparency in Aston
    • Reference table
  • Chapter IX: Plug-ins
    • AClock
    • Taskbar ClockEx
    • MenuEX
    • Quick launch
    • DisksEx and RecycleBinEx plug-ins
    • Panel
    • AMonitor
    • Search
    • Other plug-ins
  • Chapter X: Finishing your Theme
    • Stop and think
    • Assembling the Theme
  • Chapter XI: Copyrights and related issues
    • Short introduction
    • Third-party materials
    • Ripping
    • Choosing licenses for your own works

Need the tutorial but cannot read the whole of it online? Download the CHM version here. (ZIP, ~500Kb)


Aston Shell skinning tutorial: Introduction

Introduction

About this document

This tutorial should explain to newbies some aspects of creating Aston Shell Themes.
Note, that this document is written for people, who already have some experience in skinning and work with graphical applications, so if you're a complete newbie, you'll probably have to look for some graphics tutorials first.

You can surely start making decent Themes without even reading the tutorial (as Aston GUI lets you do this quite easily) but this won't be wiser than driving a car without even being aware of highway code. So, at least give this document a try...

The tutorial was originally started by Taras Brizitsky aka SacRat, a member of A.R.T. group. Some additional information was added with the help of Nikita Eugenov aka Smanic/A.R.T. and later slightly reformatted by Nerio. The original SkinWiki version has been started by Rich Kulesus aka mrbiotech.

The current version of the tutorial is mostly written/maintained by SacRat.

Although all the rights to the original version of this document belong to SacRat and early contributors, the updated tutorial you're reading now is distributed under the terms of FDL/CC BY-NC-SA and is meant to replace SacRat's original work and become the official skinning tutorial for Aston. If you're unfamiliar with these licenses you can find links to them at the very beginning of the document. The licenses are very unrestrictive and give you a lot of freedom to modify and redistribute this work. If you feel experienced enough you can easily update this tutorial on SkinWiki.

Note: this tutorial completely reflects the process of Aston 1.9.2 skinning.

And, finally... Don't think this tutorial to be your theming Bible: it only contains general information and during your work you'll need other sources as well. We've removed all the redundant information in order to make it easier to read.

Graphics tutorials

If you need any Photoshop tutorials to help you to improve your graphics creation skills, here's the "first aid" list:

  • http://www.eyeball-design.com/
  • http://www.good-tutorials.com/
  • http://www.tutorialman.com/
  • http://www.SkinYourScreen.com/
  • http://www.deviantart.com/

Some of these sites can be useful even if you're an experienced Photoshop user.

Note: Basically you can start making Aston Themes using whatever graphics editor you're familiar with, even MS Paint.

Artists to learn from

There're many Themes for Aston, but not all of them are innovative and fresh.
Make sure to check "featured" Themes on the site first if you need to learn some tricks or dig for ideas. Also check works after the following artists (in no order):

  • mrbiotech - The author of some of the most extraordinary Themes for Aston. They're maybe not just for daily use but have a great artistic value.
  • Nerio - his recent works have become quite popular in the community.
  • Smanic - his "eternal beta", "My Corona" are one of the most promising Themes for Aston 1.9.2, not to mention excellent and innovative previous works.
  • Roman Osadchy - he has made just a few Themes but all of them are 100% hits with the incredible level of care about details.
  • frozzen - one of the most popular Aston Theme designers ever. His works are not innovative but always stylish and eye-candy.
  • SacRat - for some reasons some people think he made a couple of decent Themes in the past.
  • modulis - a few interesting works with an unusual look.
  • Dmitry Prosvirnin - Gladiators' leading designer who has made several works which are now pure classics.
  • There're many, many other interesting designers waiting for their 15 minuttes of fame :)

Basic Theme

The simplest Aston Theme consists of the following elements:

  • Wallpaper (background picture)
  • Taskbar, Tray and state skins
  • Start button/Main Menu skins
  • Toolbar skins
Note: this is the absolute minimum of what you should make in order to have a very basic Theme for Aston.

If you want to make a complete Theme, you should also include the following elements:

  • Plug-ins' skins: it depends on a certain Theme's settings, the list of the installed plug-ins and Aston version
  • Cursors: you can replace the default cursors with something, which fits your Theme (actually you can use a free version of CursorXP for making better looking ones)
  • Icons: Aston is able to replace standard Windows icons although this feature is slightly limited
  • Buttons and ANK objects: you may need some buttons or even animation sets
  • AltDesk skin: as AltDesk is de facto a VDM for Aston

  • Support for several screen resolutions

A few definitions

  • All graphics-related values are defined in pixels
  • All distances are calculated relatively to the left-top corner (of the screen, skin, shape, etc...)
  • All fonts are defined in points
  • Offsets are usually thought of as distances between the object edges
  • Bound boxes usually define areas of text labels in X1,Y1,X2,Y2 coordinates of their left-top and right-bottom edges
  • Glass is usually a semi-transparent layer, created on the very top of the element
  • Background is the bottommost element of the skin

Just don't forget about it and the rest will be much easier :)


Aston Shell skinning tutorial: Resource types

Resource types

BMP, PNG, ICO, JPG

BMP and PNG are the most commonly used file types when creating Aston Themes.
If you're already familiar with computer graphics you must know enough about them. If not, making Themes is definitely not the first thing you should learn.

Although you can convert BMP files to PNG and use them in many places of the GUI we'd recommend following these basic rules to avoid possible problems:

  • Use BMP anywhere when you don't need transparency at all or 1 bit transparency is enough to meet your needs. Don't cripple ordinary 24 bit RGB bitmaps without need and use; no need to "overoptimize" them to 8 bit, 16 bit, etc...

  • Use 32 bit PNG where they're supported. For 24 and 8 bit (recall what you've just read about 8 bits? ;)) images use BMP instead. So if a certain GUI component accepts PNG files this means that it must accept 32 bit PNGs. Just keep it in mind.

ICO files are commonly used in Windows. Nevertheless for Aston Theme creation we recommend replacing them with PNGs if only you're not making a custom icon pack.

Even though it's theoretically possible to use JPEG files for the "Start" button and some other GUI parts we do not recommend using them anywhere but on the Desktop (for wallpapers only). Really. JPEG compression is nice and can greatly reduce the Theme size but you should use it only for wallpapers and nothing else: otherwise it just makes no sence.

Note: use PNG for alpha transparency, BMP everywhere when you don't need transparency or 1 bit transparency is enough and JPEG for wallpapers only.

3PIC

3PICs have been implemented in Aston 1.9.2 in order to add support for rounded bevels on certain elements:

3PIC sample illustration
3PICClock
Elements, created with 3PICs.

3PIC is actually the left flank, the tiled center part plus the right flank. 3 PICtures ;). Well, actually 3 more as one may add "glass" for all the parts of the 3PIC. So, instead of 6 files you need just one.

Here's a more detailed file format description:
3PIC is actually a ZIP archive with the extension changed to *.3PIC. The archive content is the following:

  • left.* - the left flank in BMP or PNG format

  • right.* - same for the right flank

  • tiled.* - the centered tiled part

  • glass-left.png - the left glass skin (32 bit PNG! although you're free to play with it)

  • glass-right.png - the right glass

  • glass-tiled.png - the center part glass

That's generally all. The format is new, so feel free to experiment with it. At present you can freely use 3PICs on the Taskbar and Main Menu. Just don't forget about transparency limitations.

Note: in 3PICs text (like the one on task buttons, Tray clock, etc...) is always displayed on the central part! If necessary, use offsets to align it.
Note: even though 3PICs have no "width", their minimum width is often limited by the size of their flanks.

And the final note:

Note: When compiling 3PIC files don't put folders into the archive, otherwise they would not be identified correctly. I.e. even if zipping a folder with your 3PIC files might sound attractive you should not do this.

ANI animation, ANK objects

As you already know, almost any Aston Shell element has three states: normal, highlighted (mouseover) and pressed. Mostly, each state is associated with a single image. The first versions of the program allowed you to make so-called ANI animation. ANI format is actually a format of animated cursors, but ANI images used in Aston can be way larger: up to 255x255 px. By using ANI file format you can create simple animation for buttons, Desktop icons, etc... Nevertheless later (1.8.0+) versions of Aston allow to make much more complicated animation with very simple scripting.

Note: as ANI file format is inferior to the new ANKs we recommend avoiding it unless necessary.

ANK file represents a single animated object which can react on mouseover and clicking; it also supports animation for each state. So, generally, with the help of it you are able to easily create animated objects which can change their look on mouse pointing and clicking.

Typical ANK file looks like that (comments are marked this way):

[Normal] normal state object
File=ANK_amp.bmp frame list file for normal ANK state
Frames=0 frame sequence; here only the first frame is shown
Count=6 number of frames in the frame list image
Interval=1 time in milliseconds between the frames change; as normal state
    here is static, it doesn't matter

[MouseOver] mouseover state: mouse is hovering the object.
File=ANK_amp.bmp frame list for the "mouse over" state:
    the same bitmap is used
Frames=0-5 frame sequence: plays all the frames from 0 to 5
Count=6 number of frames: as we have used the same image for the
    whole ANK it must be the same for all the states
Interval=2 2ms frame change time is really fast

[MouseLeave] mouse leaves the object area
File=ANK_amp.bmp
Frames=5-0 frames are displayed in the reversed order (compared to
    the "mouse over" state)
Count=6
Interval=2

[Click] user clicks the object
File=ANK_amp.bmp
Frames=5-0-5 frames are played from 0 to 5 and then in the reversed
    order, thus creating "pulsing" animation
Count=6
Interval=1

So, in brief:

  • Each ANK has 4 states: Normal, MouseOver, MouseLeave and Click. Each of them can be animated separately.

  • File field points the frame sequence list.

  • Frames field lists animation sequence.

  • Count points the total number of frames in the frame list.

  • Interval is a playback (image update) interval.

While defining the animation frame sequence you can use the following characters:

  • 0-9 numbers define frame numbers, starting from 0

  • , (comma) separates standalone frames (example: 0, 25, 27,3)

  • - (minus) defines continuous frames (example: 0-3 is the same as 0,1,2,3)

Note: you can create "pause" effect by repeating the same frame several times.

The ANK sample above is taken from SacRat's "Duality" Theme and represents one of the most basic uses of ANKs.
Here's a more advanced sample by Roman Osadchy from his popular "(Techno Dream) No escape" Theme:

[Normal]
File=home_normal.bmp
Frames=0-39
Count=40 note, that the animation here is relatively long and smooth,
    consisting of 40 frames
Loop=0 sets the loop start frame; here the animation is played once
    and then repeated again from the first (0) frame
Interval=1 the playback goes with the maximum possible speed
[MouseOver]
File=home_mouseover.bmp attention! Different frame file is
    used!
Frames=0-47
Count=48
Loop=41 animation is looped from the frame 41 and thus object
    displays frames 0-47,41-47 and then continuously 41-47
Interval=1
[MouseLeave]
File=leave.bmp
Frames=0-34
Count=35
Interval=1
[Click]
File=click.bmp relatively simple animation on clicking; unlike
    MouseLeave it can be looped
Frames=0-33
Count=34
Interval=1

What you've learned from this sample:

  • Loop defines the starting loop frame

  • You can use a separate frame list for each state

  • No one limits you with just a couple of frames ;)

A few more things you need to know about ANK files:

  • ANK files are ordinary text files renamed to *.ANK.

  • Frame list is a continuous file of frames; each frame must be of the same size

  • As a frame list there can be defined BMP, PNG and even ANI files (this way timing data inside ANIs is ignored)

  • Never use complex looped multilayer ANKs with 32 bit graphics as this may require certain CPU resources. When possible, use BMP animation on top of wallpaper (i.e. no additional semi-transparent layers above or below): this demands much less processing power.

  • You can edit ANK files with any Notepad-like application or by using Aston GUI (click the plus button when editing object properties)

editing ANK properties in Aston
Editing ANK object in Aston

Note, that even though Aston can use ANK objects almost anywhere, you can use their full power only on the Desktop and with the Start button.

Here're a few sample frame lists from several popular Themes:

ANK frame list
Frame list fragments from Smanic's "My Corona" mockup. When pointing the object, the "mediaplayer" icon turns into an EP disc with a virtual EQ and on clicking the disc rotates.

ANK frame list
ANK frame list from mrbiotech's "Singularity" Theme. When pointing the object it plays interesting "laser" animation.

A few words about ANKz

Taking into acount that ANK object can consist of quite a large set of files (up to 5) in Aston 1.9.2 Gladiators Software implemented so-called ANKz. ANKz is actually an ANK file plus all the required files. All files are zipped and then ZIP is renamed to have *.ANKz extension. Just dealing with a single file is easier than having five. Especially if you're using a set of ANKs.

Note: you should not put folders into the archive just like in 3PIC case.

Dealing with frame lists

While basic ANK files might have a few frames of animation, combining them is relatively simple: you can easily do it in Photoshop, GIMP or any other editor. Larger images are harder to edit and manipulating frame lists with 20 or more images becomes a serious problem.

ANK sample frame list
Simple ANK frame list from the "Aston 1.9.1 Desktop" Theme by Dmitry Prosvirnin.

In order to ease your work you might need some tool, like Aniutil which you can just feed a set of separate BMP/PNG frames as a set of files (better name them 001.png, 002.png and so on) to and get the result as a frame list which you can later use for making ANK animation.


Aston Shell skinning tutorial: Wallpapers, screen resolution and multiresolution Themes

Wallpapers, screen resolution and multiresolution Themes

Wallpapers

The most popular screen resolutions nowadays are 1024x768, 1280x1024 and 800x600 px. These cover at least 85% of users. 640x480 px mode is outdated and used only by few. High resolutions, like 1600x1200 are still not that popular too.

So, if you want to make a Theme, which would fit most users' needs, orient it to at least 1024x768 and 1280x1024 px modes. But in order to make a universal one, add support for the following resolutions: 800x600, 1024x768, 1280x1024 and 1600x1200. If the Theme isn't distorted badly on itermediate values like 1152 x 864 then you may call your Theme fully universal.
Don't forget, that if you make a Theme for several resolutions you'll have to test it with them all (to avoid various bugs, such as bitmap displacements, etc.).

Note: if you cannot test all the needful resolutions due to your hardware limitations, ask someone to do it for you

One of the most popular wallpaper emplacement modes is centered, when Theme creators make a single solid image for their background, but in some special cases a tiled picture may be used. For example, McSIMM/A.R.T. used such a tiled background stripe for his "A2" Theme prototype. The most universal wallpaper emplacement mode is stretched. However in certain cases this may give you an inappropriate result. For example, if your wallpaper has pattern elements (like alternate lines, boxes, etc.) its stretched version might look distorted under resolutions which are not "native" to it (for example, have a different aspect ratio).

A2 prototype Theme's wallpaper
Tiled wallpaper from McSIMM's "A2" Theme prototype looks quite pretty.

So, generally, when making multiresolution Themes, try to use different wallpaper for each display mode, even though this may highly increase the Theme's archive size and require much more efforts. This hint mostly concerns self-made wallpapers as resampling already finished JPEG files makes sence only when changing their aspect ratio: plain resampling will gain you nothing and Aston can do the same for you.

Note, that in order to change resolution of your wallpaper you'll have to resample it using an appropriate tool. Most image editors can do this, but in order to get the best result, try using Irfan View or a similar program with Lanczos resampling filter. Unlike bilinear or linear filters of most applications it gives far better results in most cases.

Never, please, never use "resize" or "nearest neighbor" resampling options in your work (unless you're absolutely sure it's needful) as this is the fastest way to spoil its look:

A2 prototype Theme's wallpaper
Just for comparison: SacRat's "Duality" wallpaper resampled with nearest neighbor and Lanczos 3. Try to guess who's who ;)

And learn one more thing: scaling bitmaps up (making them larger) in most cases kills quality, so try to avoid doing this otherwise your Theme might look blurred or distorted.

Note: although you can render some graphical elements onto the wallpaper image we'd warn you from doing it and suggest replacing them instead with standalone decorative elements (have a look at "Aston 1.9.1 Desktop" Theme for illustration). This is especially useful for Themes supporting a wide range of screen resolutions.
Note: as Aston 1.9.2 supports multidisplay Themes you might try using double-width wallpapers for them

Free advice: if you have troubles with creating your own wallpapers, try contacting any wallpaper author (there are lots of them on http://www.deviantart.com) and ask one to make you a new wallpaper or to give a permission to use his (her) old work.

With the set of CC licenses becoming more accepted by the community you can relatively easily find images to base your own work on. More information about it is given in the corresponding section below.

Making multiresolution Themes

Themes in Aston, just like in the majority of other shell replacements are usually oriented to a certain screen resolution which is not always a good thing. Just because without much efforts you can make your Theme support a wide range of resolutions and thus make it suitable for most users' needs.

The way of making multiresolution Themes for Aston Shell is not very intuitive, even though there's nothing difficult about it. Just follow our hints:

  • Try using 32 bit PNGs for the elements, which are intended to be displaced by users unless they're simple enough to be presented by ordinary BMPs.
  • Note, that as all the elements are aligned by their "top-left corner", everything placed in the Top-Left area of the screen will stay untouched under most used resolutions. A sample of this is given in SacRat's Duality Theme which runs fine under a wide range of resolutions.
  • Check if your Theme works under different screen resolutions when using a single stretched wallpaper: sometimes stretched wallpapers are distorted under non-native resolutions. (If possible, make one with a different aspect ratio and keep in mind that downsampling images is always better than upsampling so if your Theme supports 1600x1200 mode, just make a wallpaper with this resolution first).
  • When finished, do the following (you must be running a completely configured Theme):
    • Open Theme Wizard and save your Theme under any unique name like "My First Theme".
    • Change display resolution,optimize your Theme for the second resolution and save it under exactly the same name as above.
    • When you see Theme Wizard's question regarding adding resolution, answer that you just wish to add one.
    • Continue to carry out the steps above until finished.

Finally you should have a single Theme supporting a given set of resolutions. That's it. More detailed information on this topic can be found here.

Duality Theme
This "target" made of a set of ANKs plus Panel skin won't flow no matter what resolution is set as its place is in the left-top corner. (From SacRat's "Duality")


Aston Shell skinning tutorial: Main menu and Start button

Main menu and Start button

Skinning Start button

Aston Shell's Main Menu is made as a plug-in. Thus, most configuration changes should be done by editing the MenuEX plug-in's properties.

Start button's skins are set separately in Aston Options>Taskbar>Start Button menu. Main menu skins can be set in Aston Options>Plug-ins>Main menu with skins & icons>Setup plug-in.

So generally you'll have to create the following images:

  • Star button's normal, highlighted and pressed state skins
  • Main menu footer, header and 2 element images (normal and highlighted) plus a separator image.
  • Additional glass skins for menu elements.

As you can see, Start button has three states. No one forces you to make them all, but creating all three images can greatly improve your Theme's look and feel.

Note: all these 3 images must be of the same size.
Note: from Aston 1.9.2 version on you can replace these images with an ANK object. Just compile the corresponding ANK file and set it as normal state skin.

When using ANKs, Start button looks even better than ever. You can make some really interesting stuff with it.

ANKs on Start button
ANK frame list from Smanic's "My corona" Start button mockup.

Start button can have transparent areas. This way you'll be able to see the default Taskbar skin through it. Just remember, that Start button is always centered vertically.
Still, in most cases transparency is redundant.

Main Menu

All the Main menu skin images, excluding separator must have the same height (and the same width is preferable as well). Separator's height can be either larger or smaller. No kind of transparency for the Main menu is supported. You can only adjust global transparency of the whole menu.

Note: for Main menu skins you can also replace ordinary bitmaps with 3PICs so that users would be able to adjust its width without distortions.

Aston Main Menu
Main Menu from Dmitry Prosvirnin's "Aston Desktop 1.9.1" Theme. This is a classic Main Menu skin for Aston 1.9.1 Themes.

Be careful, when selecting the size of Main Menu items: too large buttons can make your Theme look bloated. At the same time, too small buttons will bring you to navigation troubles. Dmitry Prosvirnin (the designer of Gladiators Software) has found a cute solution in his "Regeneration" Theme. He used menu items with a small height. That helped him to make a small menu where all the items are perfectly visible:

Compact Main Menu
Dmitry Prosvirnin's compact menu

Surely, no icons can be displayed in such a way, but you can "fix" this disadvantage by using the minimum height of menu items set to 16px. This won't enlarge your menu a lot, but will make it look prettier.

Note: Try to avoid using bloated menus with big items and control the size (dimentions) of your images.

With the implementation of footer element, 3PIC support and glass for Main Menu elements you're mostly limited by your imagination and Menu's rectangular form:

My Corona by Smanic
Fragment of "My Corona" Theme mockup by Smanic: it uses most of new features of Aston 1.9.2


Aston Shell skinning tutorial: Taskbar, state buttons and System Tray

Taskbar, state buttons and System Tray

Taskbar skins, Tray

Aston Shell Taskbar has four states for the Taskbar itself and its elements: Simple (empty Taskbar), Active state (active window), Inactive state (inactive window), Minimized state (minimized window). System Tray area can have a separate skin although many designers use the same texture as for the Taskbar. The most popular way of skinning Taskbar is tiled skins. You'll have to make a picture with the height of your Taskbar (usually 22px or so) and 1px width. Actually it can be larger, but since horizontally the pattern is the same, you don't really need to enlarge the image.

Taskbar skin
The skin is taken from Smanic's "XBox" Theme. The actual image is smaller, but we have tiled it a bit.

Above is a sample of such a texture: 80x22 pixels. The same result can be achieved by cropping the image to 1x22 px format.

The second kind of tiled skins is slightly more complicated and requires some additional skills. This time you'll make a longer stripe, which can have a much more complex pattern. In order to make such skins look better you may need to make them seamless (look for the corresponding tutorials. Just Google for "seamless texture tutorial"). Here's such a kind of Taskbar: 363x22 px. It was created for the "Colony Theme" (by SacRat):

Colony Theme Taskbar skin
It's not obvious that the image is tiled

You can also create centered or even stretched Taskbar skins, but we'd not recommend doing that. Stretched skins mostly look ugly because of inevitable horizontal deformation. Skilled Theme designers try to avoid using them. Centered skins may only be useful if you make a "solid" taskbar skin (i.e. 1024 and more px width). Nevertheless in most situations big tiled skins are more than suitable. While making state buttons (active/inactive/minimized tasks) many experienced skinners follow one rule: active tasks are often highlighted (brighter than the rest) and inactive are dull. When using bevels, many prefer "pressed" images for minimized task skins.

Task skins
Active, inactive and minimized tasks in SacRat's "Duality" Theme.

There're surely exclusions which look pretty nice as well. Just make sure that users won't have troubles with identifying tasks ;)

Note: don't use motley skins with complex textures on the Taskbar as this way text on them might be hard to read.

Note: with the implementation of 3PICs for Taskbar skins you can easily add bevels and flanks to them

Task button
Task button based on the "Royal" Theme mockup.

System Tray is very often skinned the same way as the Taskbar. Still, creating a separate skin for it might make it look better. With the implementation of 3PIC support in Aston 1.9.2 you can easily create beveled skins by using 3PIC flanks.

You can also skin Aston button in Tray in order to make your Theme look more consistent.

Note: Aston Tray icon must be a 24 or 8 bit bitmap with the size of 16x16 pixels in BMP or ICO format. It must not have transparent areas or otherwise the image will not be displayed. You can define separate images for both minimized and maximized Tray.

Some hints

  • No one forces you to create a single image for the Taskbar and System Tray. Even though it's a classic solution, you can get very interesting results by using different patterns.
  • Select frames for state images (active, inactive, minimized) carefully. The most popular classic schemes are: prominent, flat, concave, highlighted, normal, shaded. You can experiment with your own schemes. Just make sure they're not confusing.
  • If you use bevels, you can make central parts of state buttons slightly smaller than Taskbar image thus creating an interesting "embedding" effect. SacRat used this "trick" for "Aquatica 3" and "Colony" Themes.
  • Select fonts carefully: text must be clear and well seen on any of your Taskbar or state textures. Try to avoid using uncommon and unpopular fonts. Tahoma, Arial, Verdana and Courier are enough in most cases.


Aston Shell skinning tutorial: Toolbars

Toolbars

Aston Toolbars are one of the most tricky elements to skin for many Theme creators. On the one hand, creating a primitive Toolbar is simple: just make one image and repeat it for all the states, but that's far not the best you can do.

Basically each of the two Toolbars consists of 13 frames, and some of them might be repeated:

Ocean Morning Toolbar
Sample Toolbar image from Roman Osadchy's Ocean Morning

The first frame is usually a small arrow, triangle, dot or something else against the pink background. It defines the item, poining that a certain element has a sublevel. You may surely leave this frame blank but in this case the Theme's usability will be decreased.

"In wild" this looks like:

Ocean morning Toolbar "in the wild"

The following frames are divided into three parts. Each "third" represents a certain sublevel of the Toolbar and its normal, highlighted and pressed states.

So, overall, the Toolbar frame list consists of the following images:

  • Non-empty sublevel indicator
  • The first "third": the first level Toolbars
  • The second "third": the second level Toolbars
  • The third "third": the third level Toolbars open up
  • The fourth "third": the third level Toolbars open down

As in most cases both third level skins are identical you can either use the same images for them or just not place the last three frames at all thus creating only 9 frames.

Note: for the Toolbars you can only use 1 bit "magic pink" transparency. For the first level Toolbar you cannot use any kind of transparency at all. Using PNG images is impossible.

Let's have a look at the "Ocean Morning" Theme Toolbar, created by Roman Osadchy as a sample.

Each Toolbar may have a header: two-state image, displayed on top of Toolbar. The topmost image is used for inactive state and the bottom one is seen when you click on the Toolbar header:

Toolbar headers
Sample Toolbar header from Dmitry Prosvirnin's "Aston 1.9.1 Desktop"

The limitations are similar: only "magic pink" may be used for transparent areas.

Note: don't try to make headers wider than Toolbar cells: the skin will be stretched anyway.

Don't think that the skin above is the only possible. It's excellent, but not the only one. Just have a look at some other works:

Toolbar skin
Left Toolbar skin from Dmitry Prosvirnin's "Cell" Theme (made in 2002 but still looks fresh and neat)

Toolbar skin
Left Toolbar skin by mrbiotech, "Cerevisiae"

Toolbar skin
Left Toolbar skin by Smanic, "Xbox" Theme

Don't forget, that there're two Toolbars in Aston, not just a single one. Thus you can give them a completely different look (if it fits your Theme's concept, of course) although this is far not the most popular solution: many designers still prefer "mirroring" Toolbar frames :)


Aston Shell skinning tutorial: Desktop items

Desktop items

Unlike many other alternative shells Aston has an excellent Desktop.
You can use it to place buttons/icons or graphical elements (more about it in the corresponding section of the help file).

All Desktop objects can be divided into three large groups:

  • plug-ins

  • buttons/icons

  • additional graphics

Some plug-ins are created to be used on Desktop only (i.e. Disks plug-in) while others "live" in Tray, Taskbar or Toolbars. Here we won't touch upon skinning plug-ins as you can find this information in the corresponding section... Let's talk about two other graphical elements, which can be seen on Aston Desktop.

The simpliest button has three states:

  • normal

  • highlighted (mouseover)

  • pressed

Each state is represented by a single bitmap.

You can make buttons of any form and almost of any size; you can also make freeform buttons using "magic pink" color or 32 bit PNGs; buttons can have label text below them.

Generally Aston does not differ buttons from icons so it doesn't really matter what your icon/button looks like or what shape it has: there're lots of variations. Just keep it in mind while working on your Theme.

Note: make sure controls (interactive elements) are always different from the background/decorative elements. You can achieve this by making controls react on mouseover, by making them different in color/form, etc.

3 state icons look definitely better than ordinary objects on Windows Desktop, most of which just have 1 or 2 states. Still, lack of intermediate frames will not allow you to create complex animation. In order to do this just use ANK objects instead of 3 state pictures.

Aston Themes might also contain additional graphical elements, not requering user interaction. These might be various kinds of backgrounds or decorative shapes, not rendered onto the wallpaper but left separated for better resolution compatibility. In order to create such objects, just set their object type as "Theme Element (obsolete)" or "Empty".

Techno dream decorative element
Background stripe from Roman Osadchy's "No Escape" Theme


Aston Shell skinning tutorial: Transparency

Transparency

Using transparency in Aston

From the version 1.9.0 on, Aston Shell Themers can use 32 bit images in their works.

First ofl all, you must keep in mind one simple thing: when working with Aston you can deal with two kinds of transparency:

  • "magic pink" (1 bit transparency)
  • 8 bit alpha transparency

The difference between the two is obvious when you look at the image below:
Transparency distortion

[AD voice on] The left part of the image is made in 32 bit PNG while the right one is ordinary 24 bit bitmap. [AD voice off]
We've tried to place both pictures on different backgrounds and here's the result. By applying various tricks we can reduce the visibility of rough edges on the left but we cannot disable it completely just like we cannot add transparency to the "atmosphere" part.

"Magic pink" transparency is called so because by default so-called magic pink (255,0,255 RGB) colored areas are completely removed by the program during rendering, so instead of

magic pink: original image

one can see

magic pink: resulting image

depending on the background, of course :)

Note: transparent areas must have exactly (255,0,255 RGB) color and no other. So areas with (254,1,254) will remain pink! Be careful.

Save images with the "magic pink" as 24 bit BMPs and make sure this color is not "magically" displaced with another one ;) That's why we warn you against using various "optimizations": in 24 bit it might be (255,0,255) while at 8 bit it may turn into (250,5,255) and we bet you won't tell the difference relying on your eyes.

In order to use alpha transparency just create 32 bit PNG file and "feed" it to Aston. Piece of cake! ©

Reference table

Here's a reference table, showing where one can use Transparent elements and where he/she cannot.

Element type | "Magic pink" | alpha transparency (32 bit PNG)
Desktop icons | OK | OK
ANK objects | OK | OK
Desktop plug-ins | OK | OK
Taskbar skin | NO | NO
Taskbar state buttons | OK | OK
Taskbar plug-ins | OK | OK
Tray skin | NO | NO
Start button | OK | OK
Main Menu | NO | NO
Toolbars, level 1 | NO | NO
Toolbars, levels 2-3 | OK | NO

Generally, don't use transparency for Taskbar, Tray and Main Menu. Also be aware of Toolbars limitations.


Aston Shell skinning tutorial: Plug-ins

Plug-ins

From the version 1.9.2 on Aston has got a new plug-in configuration system which is generally described in Aston Shell manual. Here we won't repeat everything written there and will just focus on some less obvious aspects of skinning certain plug-ins.

Aclock

Aclock is an analog clock plug-in for Aston featuring anti-aliased hands, glass and other interesting things. In fact it gives you anything you can wish from a modern analog clock widget but takes considerably less resources.

Clock skin itself consists of three parts (as defined in the Skin tab):

  • Glass skin - optional semi-transparent top layer, often displaying glass reflection

  • Background skin - the clock itself, the main skin image

  • Hands texture - hand texture image

The first two layers are pretty common and I'm sure we don't need to explain what "glass" means.

Hands texture is used the following way: you define each hand's width and radius and then instead of being filled by a solid color the hands are "cut" from the background. Below is a sample from Dmitry Prosvirnin's "Aston 1.9.2 Desktop" Theme:

Aclock background Aclock hands texture
Background (left) and hand texture (right) skins for Aclock plug-in

Aclock: resulting image
The resulting image

I think the pictures talk for themselves. Still, this technique is not common and many users prefer some more common look of the clock:

Aclock skin
Aclock by frozzen from his "N-SyS ^ e X T a Z y ^" Theme

Aclock skin
Fragment of Roman Osadchy's "Techno Dream" Theme

While frozzen has decorated his skin with a glass, Roman has made a transparent background, so the clock looks pretty at any part of the screen.

Configuring other plug-in's options should be relatively easy as most options are hidden in the Skin tab. You should generally configure hands properties plus carefully define the hands center offset (by default it's located exactly in the center of the background skin bitmap), set hands color (you can also make hands drop shadows!) and finally define date options. Even though date is rarely displayed on the analog clock (in most cases designers don't think it's necessary) you can make an exception.

Taskbar ClockEx

This plug-in displays Tray clock and can also show calendar on clicking or pointing to the clock area. Tray clock can be skinned by applying a single image plus making some font tunings. In the most primitive case the clock background might have the same texture as Tray, but it's far not the most beautiful solution.

By using some more complex images you can get much more interesting results:

Taskbar clock skin
Taskbar clock from the "Ocean Morning" Theme by Roman Osadchy

And with 3PICs your fantasy is unlimited. Just note, that this is actually the same skin with different user-defined time display modes.

Taskbar slock with 3PICs
Fragment of Smanic's "Corona" Theme mockup

In order to make something similar you'll just have to define a proper 3PIC as a background in Skin>Clock>Background skin plus to fine-tune the text offsets.
There're just two of them: Text offset left and Text offset right. The first value defines the offset from the left border of the skin while the second one points out the right one. Configuring the text in Fonts and Colors tab is even easier: nothing complex at all.

Now let's turn to the calendar.

It can be displayed in one of the following modes (Misc.>Background type):

  • Color - background, filled with a solid color

  • Skin - background image

  • None - transparent (invisible) background

Still, it would be great if you could make a decent skin for it although in certain cases you may get appropriate results with the colored background.

Tray calendar, basic
TaskbarClockEx calendar, solid infill mode

Colored calendar might look quite primitive and should mostly be used in minimal Themes. Taking into account that calendar skinning is not complex and its skins might be nearly as attractive as the ones of Rainlendar you're free to experiment:

Tray calendar, advanced
Frozzen's calendar prototype for Aston 1.9.2

You can change all the font properties and colors (like setting different fonts for today, months, year and previous/next months) and place date/month/year text in any part of the skin. You may also have an additional glass layer to be dislayed on top of the calendar.

Note, that you may replace text month/year arrows with custom images, even ANKz.
By default the arrows are located outside the month/year rect.
At the same time you may place the arrows to any part of the skin by setting the values of the corresponding arrows' bound boxes. Also take note that these bound boxes are made only for arrow positioning and thus the arrows are displayed inside the rect.

In fact there're lots of things you can do: just use your imagination.

Tray calendar sample, Makrom
Calendar from Aston 1.9.2 "Makrom" Theme by DanilloOc

You may highlight the current date by changing its font and color properties but you can also assign a background or glass to it on Skin tab.

MenuEX

The process of the Main menu skinning is already described in the corresponding section.

Note, that the Main Menu and Start button are skinned separately.

Quick launch

There's not much you can do with the Quick launch plug-in. Mostly because it uses the same skin as the Main menu and you can only define additional skins for the background (in most cases the skin is the same as for the Taskbar) and the menu access button (which makes QL behave like a Start button).

Here are just three common skins for the Quick launch button:

Quick launch button
Quick launch buttons from the "Ocean Morning", "Duality" and "Prion" Themes by Roman Osadchy, SacRat and mrbiotech correspondingly.

With the implementation of 3PIC support and left-right offsets for the Quick Launch background in Aston 1.9.2 it has even become possible to mimic Windows Quick Launch:

Windows Quick Launch in Aston
Taskbar fragment with Windows-like Quick Launch from the "Makrom" Theme by DanilloOc.

You can easily find out the way of creating similar skins by just having a look at this Theme, included into Aston 1.9.2 package ;)

DisksEx and RecycleBinEx plug-ins

These plug-ins are very similar: both are skinned by a single frame list and both require nearly no efforts to fine-tune.

These plug-ins are multistate i.e. they can visually indicate the state of infill for the HDD partition and the Recycle bin. The actual number of frames (states) depends only on your wish. In any case, make at least three, for the full, intermediate and empty states.

Note, that the first frame of the Disks refers to the full partition while for the Bin the first frame is used for the empty state!

If you're reading this you must already know how to make a frame list with the set of frames (this topic is covered in the ANK section). Here're just two image list fragments from Dmitry Prosvirnin's "Aston 1.9.1 Desktop" Theme:

Disks Ex frame list sample
First three frames from Dmitry Prosvirnin's Disks skin

Recycle Bin sample frame list
Last six frames from Dmitry Prosvirnin's Recycle Bin skin

Should we mention that you can draw nearly anything you like instead?

One more thing about the Disks plug-in you should know. For Disk labels you might use the following predefined commands:

  • \r\n - return (new line)

  • %name% - disk label (name)

  • %index% - disk letter

  • %free% - free space

  • %freeEx% - free space without Gb/Mb text

  • %total% - total disk capacity

  • %used% - used disk space (in gigabytes/megabytes)

  • %p_free% - percents of free space

  • %p_used% - percents of used space

Everything else should be intuitive.

Panel

From the moment of its appearance in Aston 1.8 on TopPanel has become one of the most popular Aston plug-ins. Its current successor, Panel, gives you everything you need to organize shortcuts on your Desktop. Skinning Panel is harder than most other plug-ins but it's worth the efforts.

Panel skin
Panel from Dmitry Prosvirnin's "Aston 1.9.1 Desktop" Theme: classic Panel skin

Panel lets one organize shortcuts into two-level menus. Although one can create a single "stripe" of shortcuts (using only one level) we'd recommend not doing this. The first level items are called Categories and the second level items are just "Elements".

Skins are defined in the Skin>Skin list section. There're actually not many of them:

  • Left Flank - left border of the Categories "stripe"

  • Right Flank - right border of the Categories "stripe"

  • Item - Categories skin

  • Header - elements header

  • SubItem - elements skin

  • Footer - elements footer

  • Separator - separator :)

Each of these elements has 3 state skins.

While creating a default panel item tree, don't assign links to the first level elements as this might be confusing for users.

Have a look at the screenshot below:

Panel skin
Panel from SacRat's "Duality" Theme

It's quite a typical look of Panel except for the left flank being combined with the set of ANKs.

  • Here're a few hints you may find useful when making Panel skin:
    • Use flanks to give your skin a solid look.
    • Don't ignore the ability to use different bitmaps/fonts for the normal/highlighted and the pressed states of each element: it can boost the ease of its use. Still, extremes should be avoided as usual ;)
    • Use offsets in bound boxes to position the text precisely.
    • Playing with Category offsets might be useful when making "overlapping" elements or when it is necessary to shift them a bit.
    • Icons are easy to position using horizontal offsets (setting vertical ones is possible only by adjusting bitmaps).
    • When using shadows for elements be twice as careful since overlapped transparent elements look poor. In order to apply overlapping shadows you'll have to render them on bitmaps though it's not an advanced technique.
    • Just have a look at the variety of panels created by Aston Theme designers if you're stuck and ran out of ideas.

AMonitor

AMonitor is a basic resource meter plug-in for Aston. It can display the following information:

  • CPU usage

  • Memory load

  • Network load (in/out)

Any of these data can be represented as a text, as an image (a frame list) or both. Graphical meters are frame lists, representing the required value as a set of intermediate images.

Note, that the first frame in the frame list, used by AMonitor, always represents the smallest indicator's value.

Skinning the plug-in is relatively simple: you have a background skin plus a set of meters you can use (leave the fields empty if you don't need a certain meter). Just place all the meters you need to the background and make sure they're positioned correctly.

Note, that it's easier to place meters if you start with using stubs with a single frame, keep on with correct placing all the elements and only then perform replacing stubs with the correct frame lists (don't forget to correct the number of frames!). This will save you a lot of time.

And, finally, a few sample skins after known Aston designers:

Amonitor skin
AMonitor skin by Roman Osadchy ("Techno Dream" Theme): CPU and memory meters.

Amonitor skin
AMonitor skin by frozzen

Amonitor skin
AMonitor from SacRat's "Duality" (Memory and bandwidth meters)

All these skins use frame lists for meters and the last two sometimes duplicate the info with the help of the text.

Search

Search is a brand new plug-in from Aston 1.9.2 package.
It's only goal is to send a search query to a web browser i.e it's just a basic search module. It's most interesting feature is that the plug-in's window increases while you type the text in it so the quiery is human readable.

Search skin
Search plug-in from the "Makrom" Theme by DanilloOc.

In order to make a skin you'll have to make just two graphical elements: the base skin the and search button.

The base skin is basicly a 3PIC where the central tiled part is used for the search query text. In order for the plug-in to be displayed correctly you'll also have to set two additional values on the Misc. tab:

  • Min search area size: the minimal skin's width.
  • Max search area size: the maximal skin's width.

Select the same values so setting the minimal width to 50 and the maximum to 100 is not cute. Just make sure that with the minimal width the plug-in looks ok (and even better, it can contain at least 10 characters) and with the maximal width it remains on the screen while containing about 30-40 symbols.

The search button is positioned relative to the left-top pixel of the right 3PIC flank, so you'll most likely have to set the horizontal and the vertical offsets in order to position it.

The search field also needs to be positioned. By default it has a white (not transparent!) background and 17 px height. You cannot change the background color but you can tweak the query font, so it looks more or less the way you'd like to have it.

Other plug-ins

There're some Aston plug-ins not mentioned here. They're mostly created by third-party developers but if you have read this chapter it should not be hard for you to make skins for them as well.


Aston Shell skinning tutorial: Finishing your Theme

Finishing your Theme

Stop and think

Before you grab your Theme and submit it somewhere, stop and think if everything you have done is done correctly. As practice shows, all Themes require some testing before distributing. Here we'll give you some hints on what you should pay your attention to:

  • System colors
    • You may include a custom color scheme into your Aston Theme. If so, make sure that
      1. Current color scheme really matches your Theme.
      2. It's tuned correctly. I.e it doesn't have green window headers with brown text on it.
    • If possible, use one of the predefined color schemes or slightly modify it: this would help you to avoide various troubles.
  • Icons
    • Aston 1.9.2 doesn't let you include auto-applying system icons into the Theme. This is done due to many reasons but you may still provide a separate icon pack, which can be attached through the Theme Wizard.
    • If so, make sure you've included all the needful icons and your pack has no "alien" icons included by accident; remove such icons, if necessary.
  • Cursors
    • If including cursors, make sure your cursor scheme is intact (check Control panel>Mouse>Pointers).
    • You may also include a CursorXP set of cursors which may look better than system ones.
  • Toolbars
    • Check if you have properly set the size of a Toolbar cell in Aston Setup>Left (Right) Toolsbar>Toolbar element size. Do it for both Toolbars!
    • Make sure the caption has a proper width: not larger than a single Toolbar element
    • Finally, check if all the elements are on their proper places and are not displaced: just browse through all three levels of Toolbar items in Aston and check if there're visual gliteches you've missed.
  • Plug-ins
    • Make sure all the plug-ins you wanted to skin are skinned properly.
    • Disable all the plug-ins which are not parts of the Theme.
  • Desktop elements
    • Once again check the look of your Desktop elements, especially ANKs as they are often distorted due to incorrectly defined frame lists.
    • Remove all the garbage like temporarily set links, useless graphical elements, etc...
    • Mark all the Desktop elements intended to be parts of your Theme as Themes element in Aston Options>Desktop>(richt-click an element)>Properties or by setting this option individually
    • Locking Desktop elements not intended to be displaced is also a very good idea ;)
  • Transparency issues
    • Check if your transparent elements look neat and there're no "slightly-visible" dirt in the background, no alien pixels and so on.
    • Check this twice for elements with "magic pink": they cause visual glitches very often: even a single pink pixel can spoil the whole Theme.
    • Check if you have followed the hints in the transparency chapter: this will save you lots of nerves ;)
  • Resolution-related bugs
    • The only real way to check if your Theme works fine under all the supported resolutions is checking it under all these resolutions manually.
    • Even if your Theme is to be used under a single possible resolution make sure at least it doesn't look crippled under close resolutions.
    • If your Theme supports dual-monitor mode, it's a good idea to check this "live" :)
Make sure you haven't included any third-party material you don't have permission to use into the Theme. It might be an AltDesk skin, a set of icons, cursors or just some graphics.

Now just try working a bit with your Theme: using it as the only Theme for at least a week or two helps to eliminate most bugs and also gives you ideas about making the Theme even better.

When finished, check everyting thrice as you've most probably missed something.

Assembling the Theme

Starting from the version 1.9.2 on, Aston creates compiled Themes in ATZ format which are not supported by the previous versions of the program. Taking into account that one gets a lifetime license for the program there's no real need to use previous versions anyway ;)

Compiled Themes are created by Theme Wizard but anyway you can edit the content of ATZ files using any modern compression tool.

In order to compile a new Aston Theme follow the steps below:

  1. Make sure the Theme is finished and contains no errors.
  2. Make sure you're running a ready to use Theme i.e. with all the unnecessary stuff removed or disabled.
  3. Run Theme Wizard and click the Save Theme button.
  4. Fill the necessary fields:
    • Theme's Name - your Theme's name, which will be displayed in Theme Wizard.
    • Designer - your name (if it's you who has made the Theme).
    • Contact - contact e-mail or URL. Leave this field void if you don't want to share this info.
    • Resolution - Theme's resolution. You may select either the current resolution or All resolutions for universal Themes, supporting a wide range or resolutions.
    • Description - your Theme's brief description. Don't write novels there: only the necessary information.
  5. Click Next and set two checks:
    • System colors - to include system colors. Remove the check if you're using a standard color set.
    • System cursors - to include a set of cursors. Uncheck this option if you're not using a custom cursor set, made specially for this Theme. Click the Cursors button to change the current cursor scheme.
  6. Click Next once again and select the plug-ins you wish to be turned on at user's machine when he applies your Theme. In most cases the default options are correct. Click Next once again (we hope you're not tired of clicking it yet ;)).
  7. Now you must add custom fonts to the Theme.
    This means real custom fonts, so take all Arials, Tahomas and other Couriers away from the list.
    In fact, this dialog is only useful if you're using special fonts like "space" or something else which is hardly present on the end user's machine.
  8. Click Next and choose to include or exclude AltDesk skin (surely, if only it's yours and made to match the Theme). Next.
  9. Final step: select a preview picture for your Theme. The image size must be 300x225 pixels (if you have a different display aspect ratio, use 300 as the horizontal value when resampling). The easiest way to make a preview is making a screenshot of your Theme with an empty Desktop and then downsampling it to the required size. You may choose not to set any shot at all, but in this case the Theme might look less attractive in Theme Wizard.
  10. Press Next for the last time. That's it. If everything has gone OK, your Theme is now located in the Themes subdirectory of Aston.

If you just need to add one more resolution to your Theme, change the screen resolution to the required one and follow the same steps as described above, but at Step 2 when Theme Wizard asks if you wish to replace the Theme or merge it with the previous one, select Merge Themes (add new resolution). That's all. The new resolution will be added to the Theme.


Aston Shell skinning tutorial: Copyrights and related issues

Copyrights and related issues

Short introduction

When distributing your artworks and dealing with other artists' graphics it it important to know some basics which would help you to avoid potential problems because of copyright violation.

Note: copyright laws in different countries vary so you might need to refer to your local laws. We're not lawyers, so information below is not the indisputable truth.

Please remember once and forever: once you start working with third party graphics you're most likely to deal with copyrighted material. In other words, if you've downloaded a wallpaper, a Theme, a skin or something else from the web (usually no matter if you have paid for it or not) there is a very limited set of actions you can do on this artwork. In some cases you may only use this work for your personal purpose, in other cases you can redistribute the work and relatively rarely you're allowed to modify it.

Note: if you don't see a © mark on a certain arwork, it doesn't mean that it's not protected by copyright laws. Moreover, just after the creator releases it, the work is immediately copyrighted by him without any additional actions undertaken.

So, if you happened to get an artwork from an "unknown source", you're most likely disallowed to do anything but just enjoy its look (if it's not stolen from somewhere, for sure).

So, what should you do if you found an interesting piece of art and would like to base your Theme on it?

Third-party material

First of all, try to figure out what license it is distributed under. Most sites, distributing digital content give you clear information about what you can do with the artwork and what you can not.

The best sources of "crude" materials are sites, giving you access to so-called royalty-free content. So, after buying it (and getting for free sometimes) you're allowed to use it for nearly any purpose except for arrogating its creation to yourself.

Unfortunately that's not a common case and you're most likely to know the source of the material but will have no idea about its exact license. Let's have a look at two samples:

  • You have downloaded an official game artwork from a game's website and wish to make a game-inspired Theme.
  • You have downloaded some artist's wallpaper (skin) and wish to base your Theme on it.

In the first case in order to release your final Theme to the public you'll have to do several things. First of all, contact the site owners and ask them for the permission to use their artwork in your Theme as well as the game's name. Also point out that it's just a fan work. In many cases you'll not only get the permission to the material you need but the company may share some additional graphics resources (on certain conditions) with you. That's simply because of the fact that fan art is often welcome by game communities. On the other side you are most likely to have an official permission to use some material so you won't face a situation when the company's officials ask you to remove copyrighted materials from your site.
Creating a game-based Theme for commercial purposes is a different case and you'll have to contact the company as well.

In the second case you'll have to contact the copyrights owner as well. Just contact that person and describe the situation. In most cases you'll get the permission in return for providing the link to the origin. Don't even try to continue the work if you haven't got the permission: this may give you a lot of troubles.

Strictly speaking you can not just "port" new Vista (OSX, Lindows, QNX) GUI to your Theme without getting a permission first. Still, in some cases you may make variations of them, recreating all the graphics from the scratch and making it look "slightly similar" to the original. I.e. make a "Vista-inspired"-like Theme.

Note: taking a copyrighted image and "processing" it in most cases won't make the result belong to you.

In certain cases copyright owner might be inacessible (dead URL, invalid e-mail and so on) but you still wish to base your work on a certain piece of art. What should be done? The best thing you can make is point the author's name in credits which would mostly likely be OK but don't wonder when the appeared author would ask you to remove your work.

Note: "by default" (unless other is clearly pointed) it's usually considered that all the rights to this artwork belong to its author, you may freely redistribute the work in the unmodified form and cannot share any modifications.

Ripping

Ripping or stealing artwork and arrogating it to yourself is the first deadly sin in all design communities. Once caught on ripping you'll never be respected in any community and your chances to get a designer's work anywhere will be equal to zero.

If your own work has been ripped, first of all try to contact the person and to explain the situation to him (in many cases rippers are just kids) and if it doesn't help, warn site admins on copyright violation.

Also, when using someone's work with the permission, try to make sure its copyright is clear. We have faced situations when some of our works have been used by certain companies without any permission. Later it turned out that they have ordered these artworks from a freelancer who has just ripped them from various places.

So, be careful: even if the program the design of which you're trying to mimic is distributed under the terms of GPL or so, its artwork might have a completely different license. For example, opensource Mambo CMS uses icons by Fooods, which have a different license.

Choosing licenses for your own works

When distributing your artwork in a digital form, always try to make the following things clear:

  • point out the proper author(s)
  • point out your contact information
  • make the terms of use clear

Even though you may invent your own licenses it's better if you use one of the existing ones.
Some of the best licenses applied to Themes are probably Creative Commons licenses. By applying them you may give users any degree of freedom you want or just let them see/use your artwork without modifying.

One of the best possible descriptions might look like:

Trinity Theme for Aston 1.9.1 and above
(c) 2005-2006 by Taras "SacRat" Brizitsky
sacrat@my-mail.com
Licensed under the terms of CreativeCommons Attribution-NonCommercial-ShareAlike 2.5 license.
(full info: http://creativecommons.org/licenses/by-nc-sa/2.5/)
* You must attribute the work in the manner specified by the author or the licensor.
* You may not use this work for commercial purposes.
* If you alter, transform, or build upon this work, you may distribute the resulting work only under a license identical to this one.
* For any reuse or distribution, you must make clear to others the license terms of this work.
* Any of these conditions can be waived if you get permission from the copyright holder.

Note: Aston 1.9.2 Theme Wizard has separate "author" and "contact" fields so you may remove them from the description.